/**
 * Created by DuHuiling on 2017/4/24.
 */
var HyperLink = require('../../../../src/libs/hyperlink');
var Label = require('../../../../src/libs/label');
var FormItem = require('../../../../src/libs/form-item');
var Input = require('../../../../src/libs/input');
var Password = require('../../../../src/libs/password');
var SelectDropDown = require('../../../../src/libs/select-drop-down');

var UserMsg = React.createClass({
    getInitialState:function() {
        return {
            userInfo: PageDM.userInfo.value
        }
    },
    render:function () {
        var _this = this;
        return(
            <div className="confirm-id fc-dark">
                {_this.state.userInfo.realName !== undefined && _this.state.userInfo.realName !== null ?
                    <p>真实姓名：{_this.state.userInfo.realName}</p> : ""
                }
                {_this.state.userInfo.IDcard !== undefined && _this.state.userInfo.IDcard !== null ?
                    <p>身份证号码：{_this.state.userInfo.IDcard}</p> : ""
                }
            </div>
        )
    }
})

var BackAccount = React.createClass({
    getInitialState:function(){
        return {
            PayBankCards: PageDM.PayBankCards.value,
            url: PageDM.URL.value,
            // checkbox:PageDM.checkbox,
            quickPayIndex: PageDM.PayBankCards.value.SelectIndex - 1,
            gatewayPayIndex: 0,
            payTypeRadio: PageDM.payType.value,
            BankCardList: PageDM.BankCardList.value.BankCardList,
            ReFreeVal: PageDM.ReFree.value,
            inputNum: PageDM.inputNum.value
        }
    },
    componentDidMount:function(){
        var _this = this;
        //确认投资金额
        UEventHub.on(PageDM.inputNum.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function (v) {
            _this.setState({
                inputNum:v
            });
        });
        //支付方式
        UEventHub.on(PageDM.payType.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function (v) {
            _this.setState({
                payTypeRadio:v
            });
        });
        //回款账户
        UEventHub.on(PageDM.PayBankCards.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function (v) {
            _this.setState({
                PayBankCards:v,
                quickPayIndex: v.SelectIndex-1
            });

        });
        //银行卡列表
        UEventHub.on(PageDM.BankCardList.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function (v) {
            _this.setState({
                BankCardList:v.BankCardList
            });
        });
        //身份信息
        UEventHub.on(PageDM.userInfo.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function (v) {
            _this.refs.userMsg.setState({
                userInfo:v
            });
        });
        //推荐码
        UEventHub.on(PageDM.ReFree.dmbind + UI_EVENT_CONST.SET_UDM_VALUE_EVENT, function (v) {
            _this.setState({
                ReFreeVal:v
            });
        });
    },
    selectQuickPayCard: function(v){
        this.setState({
            quickPayIndex: v.selectIndex
        });
    },
    selectGatewayPayCard: function(index){
        this.setState({
            gatewayPayIndex: index
        });
    },
    payTypeHandler: function(index){
        PageDM.BussinessPwd.reset();
        PageDM.payType.setValue(index);
        PageDM.payType.onClick();
    },
    getRefs:function (ref) {
        return this.refs[ref];
    },
    render:function(){
        var _this = this;
        var _quickPayIndex = _this.state.quickPayIndex;
        var _gatewayPayIndex = _this.state.gatewayPayIndex;
        var _payTypeRadio = this.state.payTypeRadio;
        var options = [];
        var BList = _this.state.PayBankCards;
        for (var i=0; i< BList.BankAccountList.length;i++) {
            var item = BList.BankAccountList[i];
            options.push({
                option: "<div><span class='bank-logo " + item.BankIconCss + "'></span><b>" + item.AccountNoShortHide + "</b></div>",
                value: item.UserBankAccountId
            });
        }
        PageDM.PayBankCards.value.BankCardId = BList.BankAccountList[_quickPayIndex].UserBankAccountId;
        PageDM.BankCardList.value.BankCardId = _this.state.BankCardList[_gatewayPayIndex].BankCode;
        return(
            <div>
                <div>
                    <div className="title"><b></b>身份信息<b></b></div>
                    <UserMsg ref="userMsg"/>
                </div>
                <div className="title">
                    <b></b>支付方式<b></b>
                </div>

                <div className="pay-type">
                    <input type="radio" name="payType" checked={_payTypeRadio == 1} onclick={_this.payTypeHandler.bind(_this,1)}/><label onClick={_this.payTypeHandler.bind(_this,1)}>快捷支付</label>
                    <input type="radio" name="payType" checked={_payTypeRadio == 2} onClick={_this.payTypeHandler.bind(_this,2)}/><label onClick={_this.payTypeHandler.bind(_this,2)}>网关支付</label>
                </div>

                <div className="title">
                    <b></b>选择支付银行<b></b>
                </div>
                {
                    _payTypeRadio == 1 ? <div className="quick-pay">
                        <div className="confirm-bank-con clearfix fc-dark">
                            <span className="f-left">银行账户：</span>
                            <div className="f-left">
                                <div className="form-group" ref="test">
                                    <SelectDropDown options={options} defaultIndex={_quickPayIndex} showTitle={false}
                                                    onChange={_this.selectQuickPayCard.bind(_this)}/>
                                </div>
                            </div>
                            <HyperLink className="bank-add" text='<span><i className="iconfont icon-add"></i>添加账户</span>'
                                       href={_this.state.url.addCard}/>
                        </div>
                        <p className="select-table-title">您选择的是{_this.state.PayBankCards.BankAccountList[_quickPayIndex].BankName}</p>
                        <table className="selected-bank-table">
                            <thead>
                            <tr>
                                <td>银行卡种类</td>
                                <td>单笔限额（万元）</td>
                                <td>每日限额（万元）</td>
                                <td>满足条件</td>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>{_this.state.PayBankCards.BankAccountList[_quickPayIndex].Type}</td>
                                <td>{_this.state.PayBankCards.BankAccountList[_quickPayIndex].SingleLimit}</td>
                                <td>{_this.state.PayBankCards.BankAccountList[_quickPayIndex].DailyLimit}</td>
                                <td>{_this.state.PayBankCards.BankAccountList[_quickPayIndex].Description}</td>
                            </tr>
                            </tbody>
                        </table>
                        <p className="select-bank-tips">注：如您在银行设置的限额低于此限额，请以银行限额为准。</p>
                    </div> :
                        <div className="select-bank-card">
                            <div className="bank-card-list">
                                <ul ref="bank-card-list">
                                    {
                                        _this.state.BankCardList.map(function(item,index){
                                            if(index == _gatewayPayIndex){
                                                return (<li className={"bank-logo "+item.BankLogo+" selected"} onClick={_this.selectGatewayPayCard.bind(_this,index)}></li>);
                                            }else{
                                                return (<li className={"bank-logo "+item.BankLogo} onClick={_this.selectGatewayPayCard.bind(_this,index)}></li>);
                                            }
                                        })
                                    }
                                </ul>
                            </div>
                            <p className="select-table-title">您选择的是{_this.state.BankCardList[_gatewayPayIndex].BankName}</p>
                            <table className="selected-bank-table">
                                <thead>
                                <tr>
                                    <td>银行卡种类</td>
                                    <td>单笔限额（万元）</td>
                                    <td>每日限额（万元）</td>
                                    <td>满足条件</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>{_this.state.BankCardList[_gatewayPayIndex].Type}</td>
                                    <td>{_this.state.BankCardList[_gatewayPayIndex].SingleLimit}</td>
                                    <td>{_this.state.BankCardList[_gatewayPayIndex].DailyLimit}</td>
                                    <td>{_this.state.BankCardList[_gatewayPayIndex].Description}</td>
                                </tr>
                                </tbody>
                            </table>
                            <p className="select-bank-tips">注：如您在银行自行设置了单笔限额或每日限额，最终支付额度以您与银行的约定为准。</p>
                        </div>
                }

                <div className="title">
                    <b></b>回款账户<b></b>
                    <span className="fc-main tips"><i className="iconfont icon-tips"></i>（温馨提示：您所选择的银行账户将用于支付投标款项和收取投标本金及收益）</span>
                </div>

                {
                    _payTypeRadio == 1 ? <div>
                        <div className="confirm-bank-con clearfix fc-dark">
                            <span className="f-left">银行账户：</span>
                            <div className="f-left">
                                <div className="form-group" ref="test">
                                    <div className="bankCardAccount"><span className={"bank-logo "+_this.state.PayBankCards.BankAccountList[_quickPayIndex].BankIconCss}></span><b>{_this.state.PayBankCards.BankAccountList[_quickPayIndex].AccountNoShortHide}</b></div>
                                </div>
                            </div>
                        </div>
                        <div className="confirm-bank-con fc-dark" style={{paddingLeft:"0"}}>
                            <Label value="手机号："/>{_this.state.PayBankCards.StayMobile} <span className="fc-light">（此号码用于接收您的投资提醒短信）</span>
                        </div>
                        {this.state.PayBankCards.PrjectType == 1 && this.state.inputNum.FinanceDetail.IsExclusivePublic ?
                            <FormItem label="专属码：" dmbind={PageDM.ExclusiveNum.dmbind}>
                                <Input placeholder="请输入项目专属识别码" dmbind={PageDM.ExclusiveNum.dmbind}/>
                            </FormItem> : ""
                        }
                        <FormItem label="支付密码:" dmbind={PageDM.BussinessPwd.dmbind}>
                            <Password placeholder="请输入支付密码" dmbind={PageDM.BussinessPwd.dmbind}/>
                        </FormItem>
                        <FormItem label="推荐码：" dmbind={PageDM.ReFree.dmbind}>
                            <Input placeholder="请输入推荐码" value={_this.state.ReFreeVal} dmbind={PageDM.ReFree.dmbind}/>
                        </FormItem>
                    </div> :
                        <div>
                            <div className="confirm-bank-con clearfix fc-dark">
                                <span className="f-left">银行账户：</span>
                                <div className="f-left">
                                    <div className="form-group" ref="test">
                                        <SelectDropDown options={options} defaultIndex={_quickPayIndex} showTitle={false}
                                                        onChange={_this.selectQuickPayCard.bind(_this)}/>
                                    </div>
                                </div>
                                <HyperLink className="bank-add" text='<span><i className="iconfont icon-add"></i>添加账户</span>'
                                           href={_this.state.url.addCard}/>
                            </div>
                            <div className="confirm-bank-con fc-dark" style={{paddingLeft:"0"}}>
                                <Label value="手机号："/>{_this.state.PayBankCards.StayMobile} <span className="fc-light">（此号码用于接收您的投资提醒短信）</span>
                            </div>
                            {this.state.PayBankCards.PrjectType == 1 && this.state.inputNum.FinanceDetail.IsExclusivePublic ?
                                <FormItem label="专属码：" dmbind={PageDM.ExclusiveNum.dmbind}>
                                    <Input placeholder="请输入项目专属识别码" dmbind={PageDM.ExclusiveNum.dmbind}/>
                                </FormItem> : ""
                            }
                            <FormItem label="支付密码:" dmbind={PageDM.BussinessPwd.dmbind}>
                                <Password placeholder="请输入支付密码" dmbind={PageDM.BussinessPwd.dmbind}/>
                            </FormItem>
                            <FormItem label="推荐码：" dmbind={PageDM.ReFree.dmbind}>
                                <Input placeholder="请输入推荐码" value={_this.state.ReFreeVal} dmbind={PageDM.ReFree.dmbind}/>
                            </FormItem>
                        </div>
                }

            </div>
        )
    }
});
module.exports = BackAccount;